<template>
  <div>
    <span id="title"><b>处方流转订单管理</b></span>

    <div id="shaixuan_1">&nbsp;
      <i class="iconfont icon-shaixuan"></i>
      <span slot="title">筛选</span>
    </div>
    <div id="shaixuan_2">
      <div id="text">
        <font>订单编号：</font>
      </div>
      <div id="input">
        <el-input v-model="input"
                  placeholder="请输入订单编号"></el-input>
      </div>
      <div id="date">
        <font>提交时间：</font>
        <el-date-picker v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div id="button">
        <el-button type="primary"
                   @click="chose">筛选</el-button>
      </div>
    </div>

    <div id="data_1">&nbsp;
      <i class="iconfont icon-querylist"></i>
      <span slot="title">数据列表</span>
    </div>
    <div id="data_2">
      <div id="data_2_1">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="0"
                        class="menu">全部</el-menu-item>
          <el-menu-item index="1"
                        class="menu">待支付</el-menu-item>
          <el-menu-item index="2"
                        class="menu">已完成</el-menu-item>
          <el-menu-item index="3"
                        class="menu">已失效</el-menu-item>
        </el-menu>
      </div>
      <div>
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column type="selection"
                       label="选择"
                       width="50"
                       align="center">
      </el-table-column>
      <el-table-column prop="order_num"
                       label="订单编号"
                       width="120"
                       align="center">
      </el-table-column>
      <el-table-column prop="prescription_num"
                       label="处方编号"
                       width="120"
                       align="center">
      </el-table-column>
      <el-table-column prop="patient"
                       label="患者"
                       width="70"
                       align="center">
      </el-table-column>
      <el-table-column prop="department"
                       label="科室"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="doctor"
                       label="医生"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="cost"
                       label="费用"
                       width="80"
                       align="center">
      </el-table-column>
      <el-table-column prop="order_status"
                       label="订单状态"
                       width="80"
                       align="center">
        <template slot-scope="{row: {order_status}}">
          <span v-if="+order_status === 1">待支付</span>
          <span v-if="+order_status === 2">已完成</span>
          <span v-if="+order_status === 3">已失效</span>
        </template>
      </el-table-column>
      <el-table-column prop="prescription_status"
                       label="处方单状态"
                       width="100"
                       align="center">
        <template slot-scope="{row: {prescription_status}}">
          
          <span v-if="+prescription_status == 0">审核通过</span>
          <span v-if="+prescription_status == 1">审核未通过</span>
         
        </template>
      </el-table-column>
      <el-table-column prop="purchase_method"
                       label="购药方式"
                       width="100"
                       align="center">
      </el-table-column>
      <el-table-column prop="dispensing_status"
                       label="发药状态"
                       width="100"
                       align="center">
        <template slot-scope="{row: {dispensing_status}}">
          <span v-if="+dispensing_status == 0">审核未通过</span>
          <span v-if="+dispensing_status == 1">审核通过</span>
          
        </template>
      </el-table-column>
      <el-table-column prop=""
                       label="操作"
                       width="220"
                       align="center">
        <template slot-scope="scope">
          <!-- scope里面记录了当前行的下标，数据 -->
          <el-button type="success"
                     @click="info(scope)"
                     size="mini">查看</el-button>
          <el-button type="warning"
                     @click="update(scope)"
                     v-if="scope.row.dispensing_status===0"
                     size="mini">审核</el-button>
          <el-button type="danger"
                     @click="del(scope)"
                     size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
          title="订单详情"
          :visible.sync="editFormVisible"
          width="60%"
          @click="closeDialog"
        > 
         <div>
    <div id="user_message_title">&nbsp;&nbsp;
      <span>患者信息</span>
    </div>
    <div id="user_message_div">
      <div id="user_message_div_1">
        <div class="user_message_div_1">患者姓名：{{}}</div>
        <div class="user_message_div_1">性别：{{}}</div>
        <div class="user_message_div_1">年龄：{{}}</div>
        <div class="user_message_div_1">手机号：{{}}</div>
      </div>
      <div id="user_message_div_2">
        <div class="user_message_div_2">所患疾病：{{}}</div>
        <div class="user_message_div_2">肝功能：{{}}</div>
        <div class="user_message_div_2">肾功能：{{}}</div>
        <div class="user_message_div_2">过敏史：{{}}</div>
        <div class="user_message_div_2">生育计划或状态：{{}}</div>
      </div>
      <div id="user_message_div_3">
        病情描述：{{}}
      </div>
      <div id="user_message_div_4">已选药品及用药情况：
        <el-button type="warning"
                   id="look">查看原始处方</el-button>
      </div>
      <div id="user_message_medical">
        <div id="user_message_div_5"
             v-for="i in 3"
             v-bind:key="i">
          <div id="picture"></div>
          <div class="user_message_div_5">
            <div id="rx">&nbsp;Rx</div>
            <div id="rx_name">苯磺酸氨氯地平片（络活喜）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x 1</div>

          </div>
          <div class="user_message_div_5">规格：5mg*7片/盒</div>
          <div class="user_message_div_5"
               style="color: red">￥25</div>
          <div id="user_message_div_6">用药情况： 正在服用；口服，每天一次，每次1片，用药21天</div>
        </div>
      </div>
    </div>
  </div>
        </el-dialog> 
        <el-dialog
          title="订单详情"
          :visible.sync="editFormVisible"
          width="60%"
          @click="closeDialog"
        > 
          <div>
        
        <div id="orderinfo">
            <el-descriptions title="患者信息">
                <el-descriptions-item label="患者姓名">{{user.name}}</el-descriptions-item>
                <el-descriptions-item label="性别" v-if="user.gender==1">女</el-descriptions-item>
                <el-descriptions-item label="性别" v-if="user.gender==0">男</el-descriptions-item>
                <el-descriptions-item label="年龄">{{user.age}}</el-descriptions-item>
                <el-descriptions-item label="所患疾病">{{user.illness}}</el-descriptions-item>
                <el-descriptions-item label="肝功能">{{user.liverfunc}}</el-descriptions-item>
                <el-descriptions-item label="肾功能">{{user.renalfunc}}</el-descriptions-item>
                <el-descriptions-item label="过敏史">{{user.allergy}}</el-descriptions-item>
                <el-descriptions-item label="生育计划或状态">{{user.birthplan}}</el-descriptions-item>
                <el-descriptions-item label="病情描述">{{user.symptom}}</el-descriptions-item>
            </el-descriptions>
            
        </div>
        <br>
        <br>
        <div id="medicineinfo">
           <el-descriptions title="已选药品及用药情况">
            </el-descriptions>
            <div id="user_message_medical">
        <div id="user_message_div_5" v-for="(item,index) in medicineMessage" :key="index">
          <div id="picture">
            <el-image style="width: 100px; height: 100px" :src="image_urls[index]" fit="scale-down" :preview-src-list="image_urls"></el-image>
          </div>
          <div class="user_message_div_5">
            <div id="rx">&nbsp;Rx</div>
            <div id="rx_name" >{{medicineMessage[index].name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x 1</div>
          </div>
          <div class="user_message_div_5">规格：{{medicineMessage[index].specifications}}</div>
          <div class="user_message_div_5" style="color: red">￥{{medicineMessage[index].price}}</div>
          <div id="user_message_div_6">药物描述：{{medicineMessage[index].description}}</div>
        </div>
      </div>
    </div>
        <br>
        <br>
        
        <div id="consigneeinfo" class="clear">
            <el-descriptions title="处方信息">
                <el-descriptions-item label="NO">{{prescriptionmessage.no}}</el-descriptions-item>
                <el-descriptions-item label="开单时间">{{prescriptionmessage.join_time}}</el-descriptions-item>
                <el-descriptions-item label="处方单状态" v-if="prescriptionmessage.checked_status == 0">未通过</el-descriptions-item>
                <el-descriptions-item label="处方单状态"  v-if="prescriptionmessage.checked_status == 1">已通过</el-descriptions-item>
                 <el-descriptions-item label="医生">{{doctor}}</el-descriptions-item>
                <el-descriptions-item label="科室">{{department}}</el-descriptions-item>
                <el-descriptions-item label="初步诊断">{{prescriptionmessage.diagnosis}}</el-descriptions-item>
                <el-descriptions-item label="处理意见">{{prescriptionmessage.opinion}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <br>
        <br> 
          
    </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">返回</el-button>
          </div>
        </el-dialog> 

   <!-- 编辑对话框 -->
    <el-dialog title="审核"
               :visible.sync="dialogVisible"
               width="50%">
      <div>
    <span>审核状态：</span>
    <el-radio-group v-model="temp.dispensing_status">
      <el-radio :label="0" >未核准发药</el-radio>
      <el-radio :label="1">已核准发药</el-radio>
    </el-radio-group><br><br>
    <span>备注：</span>
    <el-input type="textarea"
             v-model="temp.comment"
              rows="10"></el-input><br><br>
    <div>
      <el-button type="danger"
                 size="mini"
                 @click="change()">确定</el-button>
      <el-button type="success"
                 size="mini"
                 @click="close()">取消</el-button>
    </div>
  </div>
    </el-dialog>
  </div>
      <div id="page">
      <Pageinfo
          :num="pageinit.total"
          :currentPage="pageinit.currentPage"
          :pageSize="pageinit.pageSize"
          @changeSize="changeSize"
          @changeCurrent="changeCurrent"
        ></Pageinfo>
      </div>
    </div>

  </div>
</template>

<script>


import Pageinfo from '../guahao-order/pageinfo.vue';
export default {
  name: "PrescriptionOrder",
  components: {
    
    Pageinfo
  },

  data () {
    return {
      temp:{
        id:'',
        dispensing_status:'',
        comment:''
      },
      user:'',
   editFormVisible: false, //控制编辑页面显示与隐藏
    dialogVisible: false,
     tableData:'',
      input: null,
      activeIndex: '0',
        obj:{
      starttime: '',
      endtime: '',
       order_num:'',
        
      },
      department:"",
      doctor:"",
       medicineIds:[],
        image_urls: [],
        medicineMessage:'',
        prescriptionmessage:"",
       pageinit: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
     
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  methods: {
     closeDialog() {
      this.editFormVisible = false;
    },
     //子传父的方法值
      changeSize(val) {
        this.pageinit.pageSize = val;
        this.pageinit.currentPage = 1;
        // 重新调用获取数据方法
        this.created();
      },
      changeCurrent(val) {
        this.pageinit.currentPage = val;
        // 重新调用获取数据方法
        this.created();
      },
      update(scope){
       
        this.dialogVisible=true;
        
        this.temp.dispensing_status=scope.row.dispensing_status
       
        this.temp.id=scope.row.id;
      },
      del(scope){
        this.$axios.delete("/order/prescriptionOrder/delete/"+scope.row.id).then(red=>{
          this.$message.success("删除成功！");
           this.findAll()
        }).catch()
      },
      change(){
        
         this.$axios
          .put("/order/prescriptionOrder/update" , this.temp)
          .then((res) => {
            // alert(res.data.data.)
            if(res.data.code == 200){
              this.$message.success("审核通过！");
            }
           this.findAll()
            
          })
         this.dialogVisible=false;

      },
      close(){
         this.dialogVisible=false;
      },
      info: function (scope) {
      this.editFormVisible=true;
      this.doctor=scope.row.doctor
      this.department=scope.row.department
      //查询患者信息
      this.$axios
          .get("http://localhost:12306/order/prescriptionOrder/user/findByRecord/" + scope.row.user_id)
          .then((res) => {
           
            this.user=res.data.data
          })
          
          //查询处方对应的药品id
          this.$axios
          .get("http://localhost:12306/order/prescriptionOrder/prescription/findMedicineIdsByPid/" + scope.row.pid)
          .then((res) => {
           this.medicineIds=res.data.data
                //查询对应药品
          this.$axios.post('/order/medicine/medicine/batchFind',this.medicineIds).then((res) => {
            
            this.medicineMessage = res.data.data
            //进行图片地址赋值
              for (let index = 0; index < this.medicineMessage.length; index++) {
                this.image_urls[index] = this.medicineMessage[index].image;
              }
          })
          //查询处方信息
           this.$axios
          .get("http://localhost:12306/order/prescriptionOrder/prescription/findById/" + scope.row.pid)
          .then((res) => {
           console.log(res.data.data)
            this.prescriptionmessage=res.data.data
            
          }) 
          });

      
    },
    //日期选择
    chose: function () {
      this.findTotalCount();
    },
    refresh () {
      this.findAll();
      this.findTotalCount();
    },
    // 根据条件查询所有处方订单
    findAll () {
      this.$axios
        .get("http://localhost:12306/order/prescriptionOrder/findAll/"+ this.pageinit.currentPage +
              "/" +
              this.pageinit.pageSize)
        .then((res) => {
          console.log(res.data.data);
          this.tableData= res.data.data.list;
          this.pageinit.total = res.data.data.total;
        //    let numdata=res.data.data.list
        //  for(const i in numdata){
        //       if(numdata[i].order_status==0){
        //          numdata[i].order_status="待支付"
        //       }else if(numdata[i].order_status==1){
        //            numdata[i].order_status="已完成"
        //       }
        //       if(numdata[i].prescription_status==0){
        //         numdata[i].prescription_status="审核未通过"
        //       }else if(numdata[i].prescription_status==1){
        //         numdata[i].prescription_status="审核通过"
        //       }
        //       if(numdata[i].dispensing_status==0){
        //         numdata[i].dispensing_status="审核未通过"
        //       }else if(numdata[i].dispensing_status==1){
        //          numdata[i].dispensing_status="审核通过"
        //       }

        //  }
          
   
        });
    },
    // 根据条件查询处方订单总数
    findTotalCount () {
      this.obj.starttime = this.date[0]
      this.obj.endtime = this.date[1]
      this.obj.order_num=this.input
      this.$axios
        .post("http://localhost:12306/order/prescriptionOrder/search",this.obj)
        .then((res) => {
          
          this.tableData = res.data.data;
          this.pageinit.total=res.data.data.length;
          console.log(this.tableData);
        });
    },
    // 状态选择
    handleSelect (key) {
      this.activeIndex = key;
      this.currentPage = 1;
      this.findAll();
      this.findTotalCount();
    },
    // 每页显示条数
    handleSizeChange (val) {
      this.pageSize = val;
      this.findAll();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findAll();
    }
  },
  created () {
    // 分页查询处方单订单
    this.findAll();
    // // 获取处方单订单总数
    // this.findTotalCount();
  }
}
</script>

<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#data_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#data_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  overflow: hidden;
}
#data_2_1 {
  /* border: 1px solid red; */
  height: 50px;
}
.menu {
  width: 25%;
  text-align: center;
}
#data_2_2 {
  margin-top: 20px;
}

#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
#user_message_div_5 {
  float: left;
  width: 500px;
  overflow: hidden;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#picture {
  border: 1px solid rgb(216, 216, 216);
  float: left;
  width: 100px;
  height: 100px;
}
.user_message_div_5 {
  float: left;
  width: 380px;
  height: 30px;
  margin-left: 10px;
}
#user_message_div_6 {
  float: left;
  overflow: hidden;
  margin-top: 10px;
}
#rx {
  width: 30px;
  background-color: rgb(221, 2, 2);
  border-radius: 30px;
  color: white;
  float: left;
}
#rx_name {
  float: left;
}
#rx_num {
  float: right;
}
.clear{
  clear:both;
}

</style>
